<template>
	<view class="raffle-content">

		<view class="balance-panel">
			<view class="left">
				<view class="title">{{$t('common.myBalance')}}（$）</view>
				<view class="number">{{user.amount}}</view>
			</view>
			<view class="right">
				<view class="title">{{$t('common.myPoints')}}</view>
				<view class="number">{{user.integral}}</view>
			</view>
		</view>

		<view class="flex justify-center raffle">
			<LuckyWheel ref="myLucky" :width="wheelWidth" :height="wheelWidth" :blocks="blocks" :prizes="prizes"
				:buttons="buttons" :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
		</view>

		<view class="rules">
			{{$t('home.raffleRule')}}
		</view>

		<u-popup :show="tipShow" mode="center" @close="signClose" customStyle="border-radius: 10px;
					width: 85%;
					max-height: 550px;
					max-width: 350px;">
			<view class="signs-content">
				<span class="titleBox">{{$t("home.raffle.notify")}}</span>
				<view class="signContent">
					<image v-show="raffle.type == '1'" src="/static/images/raffle/gold.png"
						style="margin-right: 10px; width: 60px; height: 60px; border-radius: 0px; overflow: visible; background-color: transparent;">
					</image>
					<image v-show="raffle.type == '2'" src="/static/images/raffle/score.png"
						style="margin-right: 10px; width: 60px; height: 60px; border-radius: 0px; overflow: visible; background-color: transparent;">
					</image>
					<image v-show="raffle.type == '3'" src="/static/images/raffle/hg.png"
						style="width: 85px; height: 60px; border-radius: 0px; overflow: visible; background-color: transparent;">
					</image>

					<view v-show="raffle.type == '3'">{{$t("home.raffle.noWin")}}</view>
					<view v-show="raffle.type != '3'">{{$t("home.raffle.win")}}
						<view class="raffleAmount">{{raffle.name}}</view>
					</view>

				</view>

				<button class="sign-btn" type="primary" @click="signClose()">{{$t("common.submit")}}</button>
				<view class="close-sign" @click="signClose">
					<image style="width: 30px; height: 30px; border-radius: 0px; overflow: visible;"
						src="">
					</image>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		getBalanceInfo,
		raffleList,
		raffleRaffle
	} from "@/api/system/user.js"
	export default {

		data() {
			return {
				raffleList: [],
				tipShow: false,
				raffle: {
					type: "",
					amount: "",
					name: ""
				},

				wheelWidth: "300px",
				blocks: [{
					padding: '13px',
					background: '#9c9c9c'
				}],
				user: {},
				params: {
					fonts: [{
						text: '10 pts',
						top: '10%'
					}],
					background: 'white'
				},
				prizes: [],
				buttons: [{
						radius: '50px',
						background: '#21242D'
					},
					{
						radius: '45px',
						background: '#21242D'
					},
					{
						radius: '40px',
						background: '#9c9c9c',
						color: 'white',
						pointer: true,
						fonts: [{
							text: this.$t('home.raffle'),
							top: '-20px',
							color: 'white'
						}]
					},

				],
			};
		},
		onLoad: function() {

			this.getBalanceInfoFun();
			this.getRaffleListFun();
			//	var res = uni.getSystemInfoSync();

			console.log(this.wheelWidth);


		},
		mounted() {
			var $this = this;
			uni.createSelectorQuery().select('.raffle-content').boundingClientRect((res) => {
				console.log('res.height')
				console.log(res.width)
				$this.wheelWidth = (res.width - 60) + 'px';
			}).exec();
		},
		methods: {
			getBalanceInfoFun() {
				getBalanceInfo().then(rsp => {
					if (rsp.code == 200) {
						this.user = rsp.data;
					}
				})
			},
			getRaffleListFun() {
				var $this = this;
				raffleList().then(rsp => {
					if (rsp.code == 200) {
						$this.raffleList = rsp.rows;
						$this.raffleList.forEach(raffle => {
							var raffleParams = JSON.parse(JSON.stringify($this.params));
							if (raffle.type == '1') {
								raffleParams.background = '#F6DDA4';
							} else if (raffle.type == '2') {
								raffleParams.background = 'white';
							} else {
								raffleParams.background = '#e6e0e0';
							}
							raffleParams.fonts[0].text = raffle.name;
							$this.prizes.push(raffleParams);
						})

						console.log(this.raffleList);
					}
				})
			},
			// 点击抽奖按钮触发回调
			startCallBack() {
				// if (1 == 1) {
				// 	this.$u.toast('暂未开放~')
				// 	return;
				// }
				// if (this.user.integral < 10) {
				// 	this.$u.toast(this.$t('common.myBalance'))
				// 	return;
				// }

				// 先开始旋转
				
				var $this = this;
				// 假设后端返回的中奖索引是0
				raffleRaffle().then(rsp => {
					var index = 1;
					if (rsp.code == '200') {
						$this.$refs.myLucky.play();
						index = rsp.data;
						$this.raffle = $this.raffleList[index];
						// 调用stop停止旋转并传递中奖索引
					}else {
						$this.$u.toast(rsp.msg);
					}
					$this.$refs.myLucky.stop(index);
				})

			},
			// 抽奖结束触发回调
			endCallBack(prize) {
				this.getBalanceInfoFun();
				this.tipShow = true;

			},
			signClose() {
				this.tipShow = false;
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;
		color: white;
	}

	.raffle-content {
		width: 100%;
		height: 100%;
		padding: 10px 12px;

		.balance-panel {
			margin-bottom: 10px;
			box-sizing: border-box;
			height: 100px;
			border-radius: 10px;
			overflow: hidden;
			padding: 16px 20px;
			background-color: $uni-color-primary;
			color: $uni-color-box;
			display: flex;

			.left {
				flex: 1;

				.title {
					font-size: 14px;
					font-weight: 500;
				}

				.number {
					margin-top: 16px;
					font-size: 22px;
					font-weight: 600;
				}
			}

			.right {
				flex: 1;

				.title {
					font-size: 14px;
					font-weight: 500;
				}

				.number {
					margin-top: 16px;
					font-size: 22px;
					font-weight: 600;
				}
			}
		}

		.raffle {
			border-radius: 10px;
			padding: 20px 0px;


		}



		.rules {
			background-color: $uni-color-box;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, .12);
			border-radius: 10px;
			margin-top: 10px;
			padding: 12px 20px;

		}

		.signs-content {
			padding: 20px 17px 26px;
			color: black;

			.titleBox {
				display: flex;
				justify-content: space-around;
				text-align: center;
				font-size: 22px;
				font-weight: 700;
				margin-bottom: 20px;
			}

			.signContent {
				margin-top: 20px;
				margin-bottom: 20px;
				display: flex;
				justify-content: start;
				align-items: center;

				.raffleAmount {
					font-size: 16px;
					font-weight: 500;
				}
			}

			.sign-btn {
				height: 42px;
				background-color: $uni-color-primary;
				color: black;
				border-radius: 15px;
				border-width: 0px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.close-sign {
				position: absolute;
				bottom: -50px;
				left: 50%;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
				overflow: visible;
				background-color: transparent;
				width: 30px;
				height: 30px;
			}


		}

	}
</style>